<template>
  <div>
    <div>
      <van-search
        v-model="value"
        placeholder="请输入小区或地址"
        show-action
        background="#21b97a"
      >
        <template #left>
          <span> <van-icon name="arrow-left" color="white" size="20" /></span>
          &nbsp;
        </template>
        <template #label>
          <span> 北京 ▼ |</span>
        </template>
        <template #action>
          <van-icon name="location-o" color="white" size="20"
        /></template>
      </van-search>
    </div>
    <div>
      <van-sticky>
        <van-tabs
          v-model="activeName"
          line-height="0"
          title-active-color="#21b97a"
          @click="onClick"
        >
          <van-tab title="区域 ▼" name="a">
            <div v-show="show" class="tab-fixed">
              <van-picker :columns="columns" />
              <div>
                <span class="span1" @click="toClick">取消</span
                ><span class="span2">确定</span>
              </div>
            </div>
          </van-tab>

          <van-tab title="方式 ▼" name="b"
            ><div v-show="show" class="tab-fixed">
              <van-picker :columns="renType" />
              <div>
                <span class="span1" @click="toClick">取消</span
                ><span class="span2">确定</span>
              </div>
            </div></van-tab
          >
          <van-tab title="租金 ▼" name="c"
            ><div v-show="show" class="tab-fixed">
              <van-picker :columns="price" />
              <div>
                <span class="span1" @click="toClick">取消</span
                ><span class="span2">确定</span>
              </div>
            </div></van-tab
          >
          <van-tab title="筛选 ▼" name="d"
            ><div v-show="show">
              <van-popup
                v-model="show"
                position="right"
                :style="{ height: '100%', width: '80%' }"
              >
                <div>
                  <div>户型</div>
                  <van-checkbox-group v-model="result">
                    <van-checkbox
                      :name="item.value"
                      v-for="item in roomType"
                      :key="item.value"
                      :class="{ checkboxtext: result.includes(item.value) }"
                      >{{ item.text }}</van-checkbox
                    >
                  </van-checkbox-group>
                  <div>朝向</div>
                  <van-checkbox-group v-model="result">
                    <van-checkbox
                      :name="item.value"
                      v-for="item in oriented"
                      :key="item.value"
                      :class="{ checkboxtext: result.includes(item.value) }"
                      >{{ item.text }}</van-checkbox
                    >
                  </van-checkbox-group>
                  <div>楼层</div>
                  <van-checkbox-group v-model="result">
                    <van-checkbox
                      :name="item.value"
                      v-for="item in floor"
                      :key="item.value"
                      :class="{ checkboxtext: result.includes(item.value) }"
                      >{{ item.text }}</van-checkbox
                    >
                  </van-checkbox-group>
                  <div>房屋亮点</div>
                  <van-checkbox-group v-model="result">
                    <van-checkbox
                      :name="item.value"
                      v-for="item in characteristic"
                      :key="item.value"
                      :class="{ checkboxtext: result.includes(item.value) }"
                      >{{ item.text }}</van-checkbox
                    >
                  </van-checkbox-group>
                </div>
                <div class="button-qiang">
                  <van-button type="default">默认按钮</van-button>
                  <van-button type="primary">主要按钮</van-button>
                </div></van-popup
              >
            </div></van-tab
          >
        </van-tabs>
      </van-sticky>
    </div>
    <div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="(item, index) in list" :key="index">
            <div>
              <div class="left-flot">
                <img
                  :src="'http://liufusong.top:8080' + item.houseImg"
                  alt=""
                />
              </div>
              <div class="right-flot">
                <p>{{ item.title }}</p>
                <p>{{ item.desc }}</p>
                <p>{{ item.price }}元/月</p>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getctid, getcsubway, gethouse } from '@/api/user'
export default {
  components: {},
  props: {},
  data() {
    return {
      result: [],
      characteristic: [],
      floor: [],
      oriented: [],
      price: [],
      renType: [],
      roomType: [],
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      value: '',
      show: false,
      query: {
        start: 1,
        end: 20
      },
      activeName: 'c',
      cityid: 'AREA|88cff55c-aaa4-e2e0',
      csubway: 'AREA%7Cdbf46d32-7e76-1196',
      houseid: 'AREA|88cff55c-aaa4-e2e0',
      columns: [
        {
          text: '无',
          children: [
            {
              text: '',
              children: [{ text: '' }, { text: '' }]
            }
          ]
        }
      ]
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res = await getctid(this.cityid)
    const reg = await getcsubway(this.csubway)
    // const ger = await getConditions()
    console.log(res)

    // const rge = await gethouse(this.query)
    // console.log(rge)
    // const rge2 = rge.data.body
    const sag = res.data.body
    const ags = reg.data.body
    // console.log(sag)
    // console.log(rge2)
    const text = JSON.parse(JSON.stringify(sag).replace(/label/g, 'text'))
    const texts = JSON.parse(JSON.stringify(ags).replace(/label/g, 'text'))
    console.log(text)
    // this.list = rge2.list
    this.columns.push(text.area, texts.area)
    this.price.push(...text.price)
    console.log(this.price)
    this.renType.push(...text.rentType)
    this.roomType = text.roomType
    this.oriented = text.oriented
    this.characteristic = text.characteristic
    this.floor = text.floor
    // console.log([text.area])
  },
  methods: {
    onClick(name, title) {
      // console.log(name, title)
      this.show = true
    },
    toClick() {
      this.show = false
    },
    async onLoad() {
      const res = await gethouse(this.query)
      // console.log(res)
      this.list.push(...res.data.body.list)
      this.loading = false
      this.query.start += 20
      this.query.end += 20

      if (this.list.length >= 1000) {
        this.finished = true
      }
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    }
  }
}
</script>

<style scoped lang="less">
.span1 {
  display: inline-block;
  width: 40vw;
  color: #21b97a;
  text-align: center;
  font-size: 20px;
  border: 1px solid #e9e9e9;
}
.span2 {
  display: inline-block;
  text-align: center;
  color: #fff;
  width: 60vw;
  font-size: 20px;
  background-color: #21b97a;
  border: 1px solid #e9e9e9;
}
.tab-fixed {
  position: fixed;
  z-index: 99999;
}
.left-flot {
  float: left;
  width: 105px;
  height: 80px;
  margin: 0 10px;
}
img {
  width: 100%;
  height: 100%;
}
::v-deep .van-checkbox__icon {
  width: 0;
  height: 0;
  opacity: 0;
}
.van-checkbox {
  display: inline-block;
  height: 32px;
  width: 70px;
  margin: 30px 30px 10px 20px;
  border: 1px solid #ddd;
  border-radius: 3px;
  line-height: 32px;
  text-align: center;
  font-size: 12px;
  color: #888;
}
::v-deep .checkboxtext {
  border: 1px solid #21b97a;
  background-color: #defaef;
  .van-checkbox__label {
    color: #21b97a;
  }
}
.button-qiang {
  position: fixed;
  bottom: 0;
  right: 0;
}
</style>
